<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户管理</title>
</head>
<body>

<!-- 按钮 -->
<c:forEach items="${bts}" var="bt">
    <button class="${bt.method}">${bt.menuname}</button>
</c:forEach>


<!-- <button class="layui-btn bt_add">添加</button>
<button class="layui-btn layui-btn-warm bt_update">修改</button>
<button class="layui-btn layui-btn-danger bt_delete">删除</button> -->
<div class="demoTable" style="margin-top: 10px;">
    用户名：
    <div class="layui-inline">
        <input class="layui-input" name="rolename" id="demoReload"
               autocomplete="off">
    </div>
    <button class="layui-btn search" data-type="reload">搜索</button>
    <button class="layui-btn reset layui-btn-primary" data-type="reset">重置</button>
</div>
<table id="demo" lay-filter="test"></table>
<script type="text/javascript">
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;

        //第一个实例
        table.render({
            elem: '#demo',
            toolbar: true,
            url: '${ctx}/role/page' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {
                    field: 'id',
                    title: 'ID',
                    sort: true,
                    fixed: 'left'
                }, {
                    field: 'rolename',
                    title: '角色名称'
                }, {
                    field: 'note',
                    title: '备注'
                }, {
                    field: 'createTime',
                    title: '创建时间'
                }, {
                    field: 'createUser',
                    title: '创建用户'
                }, {
                    field: 'updateTime',
                    title: '修改时间'
                }, {
                    field: 'updateUser',
                    title: '修改用户'
                }]]
        });

        //添加
        $('.bt_add').click(function () {
            layer.open({
                type: 2,
                title: '添加',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: '${ctx}/role/showAdd'
            });
        })

        //修改
        $('.bt_update').click(function () {
            var checkStatus = table.checkStatus('demo');
            if (checkStatus.data.length == 0) {
                layer.msg('至少选择一条数据', {icon: 2})
                return false;
            }

            if (checkStatus.data.length > 1) {
                layer.msg('至多只能选择一条数据', {icon: 2})
                return false;
            }

            var data = $.param(checkStatus.data[0]);

            layer.open({
                type: 2,
                title: '修改',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: '${ctx}/role/showUpdate?' + data
            });
        })

        //删除
        $('.bt_delete').click(function () {
            var checkStatus = table.checkStatus('demo');
            if (checkStatus.data.length == 0) {
                layer.msg('至少选择一条数据', {icon: 2})
                return false;
            }

            var ids = new Array();
            for (var i = 0; i < checkStatus.data.length; i++) {
                ids.push(checkStatus.data[i].id);
            }
            $.ajax({
                type: "POST",
                url: '${ctx}/role/delete',
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify(ids),
                success: function (e) {
                    if (e == "") {
                        layui.table.reload("demo", {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        layer.msg('删除成功', {icon: 1});		//高用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
                    } else {
                        layer.msg('删除失败', {icon: 2});
                    }
                },
                error: function (res) {
                    layer.msg("未知异常", {icon: 2});
                }
            });

        })

        //搜索
        $('.demoTable .search').click(function () {
            table.reload('demo', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    username: $('[name="rolename"]').val(),
                }
            })
        })

        //重置
        $('.demoTable .reset').click(function () {
            $('[name="rolename"]').val("");
            $('.demoTable .search').click();
        })

    });
</script>
</body>
</html>